<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <text class="search-icon">🔍</text>
        <input 
          v-model="searchKeyword" 
          placeholder="搜索资讯..." 
          @input="onSearch"
          class="search-field"
        />
      </view>
    </view>

    <!-- 分类标签 -->
    <view class="category-tabs">
      <scroll-view scroll-x class="tabs-scroll">
        <view class="tabs-container">
          <view 
            class="tab-item" 
            :class="{ active: activeCategory === category.value }"
            v-for="category in categories" 
            :key="category.value"
            @click="selectCategory(category.value)"
          >
            <text class="tab-text">{{ category.label }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 资讯列表 -->
    <view class="news-container">
      <view 
        class="news-item" 
        v-for="(news, index) in filteredNewsList" 
        :key="news.id"
        @click="goToDetail(news)"
      >
        <image :src="news.image" class="news-image" mode="aspectFill" />
        <view class="news-content">
          <view class="news-header">
            <text class="news-title">{{ news.title }}</text>
            <view class="news-tag" :class="news.category">{{ getCategoryLabel(news.category) }}</view>
          </view>
          <text class="news-desc">{{ news.description }}</text>
          <view class="news-meta">
            <text class="news-time">{{ formatTime(news.createTime) }}</text>
            <text class="news-views">{{ news.views || 0 }} 阅读</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore">
      <text class="load-text" @click="loadMore">加载更多</text>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="filteredNewsList.length === 0">
      <text class="empty-icon">📰</text>
      <text class="empty-text">暂无相关资讯</text>
    </view>
  </view>
</template>

<script>
import { getNewsList } from '../../api/news.js'

export default {
  data() {
    return {
      searchKeyword: '',
      activeCategory: 'all',
      categories: [
        { label: '全部', value: 'all' },
        { label: '场馆公告', value: 'announcement' },
        { label: '活动资讯', value: 'activity' },
        { label: '培训课程', value: 'training' },
        { label: '赛事信息', value: 'competition' },
        { label: '健康知识', value: 'health' }
      ],
      newsList: [],
      hasMore: false
    }
  },
  computed: {
    filteredNewsList() {
      let filtered = this.newsList
      
      // 按分类筛选
      if (this.activeCategory !== 'all') {
        filtered = filtered.filter(news => news.category === this.activeCategory)
      }
      
      // 按关键词搜索
      if (this.searchKeyword.trim()) {
        const keyword = this.searchKeyword.toLowerCase()
        filtered = filtered.filter(news => 
          news.title.toLowerCase().includes(keyword) ||
          news.description.toLowerCase().includes(keyword)
        )
      }
      
      return filtered
    }
  },
  onLoad() {
    this.loadNewsList()
  },
  onPullDownRefresh() {
    this.loadNewsList()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  methods: {
    async loadNewsList() {
      try {
        uni.showLoading({ title: '加载中...' })
        const result = await getNewsList(this.activeCategory, this.searchKeyword)
        if (result.code === 200) {
          this.newsList = result.data || []
        } else {
          uni.showToast({
            title: result.message || '加载失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载资讯列表失败:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    onSearch() {
      this.loadNewsList()
    },
    
    selectCategory(category) {
      this.activeCategory = category
      this.loadNewsList()
    },
    
    getCategoryLabel(category) {
      const found = this.categories.find(c => c.value === category)
      return found ? found.label : '其他'
    },
    
    formatTime(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      const now = new Date()
      const diff = now - date
      
      // 小于1小时
      if (diff < 3600000) {
        const minutes = Math.floor(diff / 60000)
        return `${minutes}分钟前`
      }
      
      // 小于24小时
      if (diff < 86400000) {
        const hours = Math.floor(diff / 3600000)
        return `${hours}小时前`
      }
      
      // 小于7天
      if (diff < 604800000) {
        const days = Math.floor(diff / 86400000)
        return `${days}天前`
      }
      
      // 超过7天显示具体日期
      return date.toLocaleDateString()
    },
    
    goToDetail(news) {
      uni.navigateTo({
        url: `/pages/news/detail?id=${news.id}`
      })
    },
    
    loadMore() {
      // 这里可以加载更多数据
      uni.showToast({
        title: '暂无更多数据',
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
}

/* 搜索栏 */
.search-bar {
  background: white;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.search-input {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 20px;
  padding: 10px 15px;
}

.search-icon {
  font-size: 16px;
  margin-right: 10px;
  color: #999;
}

.search-field {
  flex: 1;
  font-size: 14px;
  color: #333;
}

/* 分类标签 */
.category-tabs {
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.tabs-scroll {
  white-space: nowrap;
}

.tabs-container {
  display: flex;
  padding: 0 20px;
}

.tab-item {
  padding: 12px 20px;
  margin-right: 10px;
  border-radius: 20px;
  background: #f8f9fa;
  transition: all 0.3s;
}

.tab-item.active {
  background: #07c160;
}

.tab-text {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.tab-item.active .tab-text {
  color: white;
}

/* 资讯列表 */
.news-container {
  padding: 15px;
}

.news-item {
  display: flex;
  background: white;
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.news-image {
  width: 100px;
  height: 75px;
  border-radius: 8px;
  margin-right: 15px;
}

.news-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.news-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  line-height: 1.3;
  flex: 1;
  margin-right: 10px;
}

.news-tag {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.news-tag.announcement {
  background: #e6f7ff;
  color: #1890ff;
}

.news-tag.activity {
  background: #f6ffed;
  color: #52c41a;
}

.news-tag.training {
  background: #fff7e6;
  color: #fa8c16;
}

.news-tag.competition {
  background: #fff1f0;
  color: #f5222d;
}

.news-tag.health {
  background: #f9f0ff;
  color: #722ed1;
}

.news-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-time {
  font-size: 12px;
  color: #999;
}

.news-views {
  font-size: 12px;
  color: #999;
}

/* 加载更多 */
.load-more {
  text-align: center;
  padding: 20px;
}

.load-text {
  color: #07c160;
  font-size: 14px;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 15px;
}

.empty-text {
  font-size: 16px;
  color: #999;
}
</style> 